<template>
<div :class="['detailSideBar', isFold ? 'isFold' : '']">
  <div class="intersperse flex align-center justify-center">
    <i class="sjcj sjcj-youhuiquanguanli-"></i>
  </div>
  <div class="itemBox flex align-center" :class="{selected: item.selected}" v-for="(item, index) in navData" :key="index" @click="navItem(item.id)">
    <el-tooltip
        effect="dark"
        :content="item.name"
        placement="right"
        v-if="isFold"
    >
      <i :class="['sjcj', item.icon]"></i>
    </el-tooltip>
    <i v-else :class="['sjcj', item.icon]"></i>
    <div v-if="!isFold && !hideName" class="itemText">{{item.name}}</div>
  </div>
  <div class="foldBox flex align-center justify-center" @click="foldHandle">
    <i :class="['sjcj', isFold ? 'sjcj-zhankaishouqizhedie2' : 'sjcj-shouqizhedie2']"></i>
  </div>
</div>
</template>
<script setup name="DetailSideBar">
import { reactive, onMounted, onBeforeUnmount} from "vue";
import useAppStore from '@/store/modules/app'
const appStore = useAppStore();
import { navInfo } from "@/config/fields.js";

let navData = reactive(navInfo);
let isFold = ref(false);
let hideName = ref(false);
function foldHandle(){
  if(isFold.value) {
    isFold.value = false;
    let timer = setTimeout(() => {
      hideName.value = false;
      clearTimeout(timer);
    }, 100)
    appStore.isFoldHandle(false);
  } else {
    isFold.value = true;
    hideName.value = true;
    appStore.isFoldHandle(true);
  }
}
onMounted(() => {
  document.querySelector("#formPageMain").addEventListener("scroll", scrollHandler, true);
  addEventListenerHandler();
})
onBeforeUnmount(() => {
  appStore.isFoldHandle(false);
  if(!document.querySelector("#formPageMain")) return;
  document.querySelector("#formPageMain").removeEventListener("scroll", scrollHandler, true);
})
function navItem(id) {
  document.querySelector("#formPageMain").removeEventListener("scroll", scrollHandler, true);
  scrollIntoViewHandle(`#${id}`);
  let timer0 = setTimeout(() => {
    scrollIntoViewHandle(`#${id}view`);
    clearTimeout(timer0);
  }, 1000)
  selectedHandler(id);
  selectedHandlerView(id);
  let timer = setTimeout(() => {
    document.querySelector("#formPageMain").addEventListener("scroll", scrollHandler, true);
    clearTimeout(timer);
  }, 3000)
}
function scrollIntoViewHandle(selector){
  document.querySelector(selector).scrollIntoView({behavior: 'smooth'});
}
function scrollHandler(){
  navData.forEach(it => {
    let top = document.querySelector(`#${it.id}`).getBoundingClientRect().top - 104 - 50;
    let height = document.querySelector(`#${it.id}`).offsetHeight;
    if (top < 0 && height > -top) {
      it.selected = true;
      document.querySelector(`#${it.id}`).style.border = '1px solid #128075';
      let timer = setTimeout(() => {
        scrollIntoViewHandle(`#${it.id}view`);
        selectedHandlerView(it.id);
        clearTimeout(timer);
      },1000)
    } else {
      it.selected = false;
      document.querySelector(`#${it.id}`).style.border = '1px solid #e4e7ed';
    }
  })
}
function addEventListenerHandler() {
  let avueViewHeight = document.querySelector("#formPageMain").getBoundingClientRect().height - 50;
  navData.forEach(it => {
    document.querySelector(`#${it.id}`).addEventListener('click', function () {
      let itId = document.querySelector(`#${it.id}`).getBoundingClientRect();
      if (itId.height < avueViewHeight) {
        navItem(it.id)
      }
    }, true);
  })
}
function selectedHandler(id) {
  navData.forEach(it => {
    it.selected = false;
    document.querySelector(`#${it.id}`).style.border = '1px solid #e4e7ed';
    if (it.id === id) {
      it.selected = true;
      document.querySelector(`#${it.id}`).style.border = '1px solid #128075';
    }
  })
}
function selectedHandlerView(id) {
  navData.forEach(it => {
    document.querySelector(`#${it.id}view`).style.border = '1px solid #e4e7ed';
    if (it.id === id) {
      document.querySelector(`#${it.id}view`).style.border = '1px solid #128075';
    }
  })
}
</script>
<style lang="scss" scoped>
.detailSideBar{
  transition: all 0.2s;
  width: 230px;
  background: #f9f9f9;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  box-shadow: 5px 0 5px #f1f1f1;
  .itemBox{
    height: 50px;
    padding-left: 40px;
    cursor: pointer;
    i{
      margin-right: 10px;
    }
    &:hover{
      background: rgba(28, 132, 198, 0.5);
      color: #fff;
    }
    &.selected{
      background: #1c84c6;
      color: #fff;
    }
  }
  .intersperse{
    width: 100%;
    height: 140px;
    padding-top: 20px;
    i{
      font-size: 80px;
      color: #ccc;
    }
  }
  &.isFold{
    width: 50px;
    .itemBox{
      padding-left: 0;
      justify-content: center;
      i{
        margin-right: 0;
      }
    }
    .intersperse{
      display: none;
    }
  }
}
.foldBox{
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ccc;
  cursor: pointer;
}
</style>